<template>
    <view class="w100">
        <template v-if="isPrimitive && false">
            <label :for="inputId" class="cu-form-group azm-input-label" :class="{'solid-bottom':isSolidBottom}">
                <input :id="inputId" ref="azmInput" class="azm-input" @click="handleClick" :type="type"
                       :value="passwordTxt" :style="{zIndex:laws?0:-1}" :password="laws"
                       :placeholder-class="placeholderClass" :placeholder="placeholder"/>
                <slot name="rightIcon"></slot>
            </label>
            <input class="azm-input azm-input-hide" :value="value"
                   :placeholder-class="placeholderClass" :type="type"
                   :placeholder="placeholder" :name="name" :password="password" :focus="isFocus"
                   @input="handleInput" @blur="handleBlur"/>
        </template>
        <template v-else>
            <view class="cu-form-group azm-input-label" :class="{'solid-bottom':isSolidBottom}">
                <input class="azm-input" :value="value" :placeholder-class="placeholderClass" :type="type"
                       :placeholder="placeholder" :name="name" :password="laws" :focus="isFocus"
                       @input="handleInput" @blur="handleBlur"/>
                <slot name="rightIcon"></slot>
            </view>
        </template>
    </view>
</template>

<script>
    import jude from '../../../common/Jude'

    export default {
        name: 'tl-input',
        data () {
            return {
                isFocus: false,
                inputId: 'input-data-' + Date.now()
            };
        },
        computed: {
            passwordTxt () {
                let laws = this.laws;
                if (jude.isEmpty(this.value)) return '';
                if (laws) {
                    return this.value.replace(/[0-9a-z]/ig, '●')
                }
                return this.value;
            },
            isFocusFu () {
                let focus = this.focus;
                this.isFocus = focus;
                return focus
            }
        },
        onReady () {
            const pages = getCurrentPages();
            const page = pages[pages.length - 1];
            console.log(11, this);
            if (/pages\/tabBack\//ig.test(page.route)) {
                return false
            } else {
                return true
            }
        },
        props: {
            value: [String, Number],
            name: {
                type: String,
                default: ''
            },
            laws: {
                type: Boolean,
                default: true
            },
            focus: {
                type: Boolean,
                default: false
            },
            type: {
                type: String,
                default: 'text'
            },
            password: {
                type: Boolean,
                default: false
            },
            isSolidBottom: {
                type: Boolean,
                default: true
            },
            isPrimitive: {
                type: Boolean,
                default: true
            },
            placeholder: {
                type: String,
                default: ''
            },
            placeholderClass: {
                type: String,
                default: 'input-placeholder'
            }
        },
        methods: {
            handleInput (e) {
                this.$emit('input', e)
            },
            handleBlur (e) {
                this.isFocus = false;
                this.$emit('blur', e)
            },
            handleFocus (e) {
                this.handleClick()
                this.$emit('focus', e);
            },
            handleClick (e) {
                console.log(this.focus);
                this.isFocus = true;
                //#ifdef H5
                if (this.$refs.azmInput && this.$refs.azmInput.$el) {
                    window.jQuery(this.$refs.azmInput.$el).find('input').focus()
                }
                //#endif
                this.$emit('click', e)
            },
        }
    }
</script>

<style scoped lang="less">
    .cu-form-group + .cu-form-group {
        border-top: none;
    }

    .azm-input-hide {
        width: 0;
        height: 0;
        min-height: 0;
    }

    .azm-input-label {
        display: block;

        &.cu-form-group {
            display: flex;
        }
    }

    .azm-input-show-laws {
        font-size: 12*2upx !important;
    }
</style>
